<template>
  <div class="public-cpns">
    <top-user-pay-info :topUserPayInfo='topUserPayInfo'  class="top-pay-info">
      <template #title>
        <slot name="top-title"></slot>
      </template>
    </top-user-pay-info>
    <pay-method
      @optionsChange="optionsChange"
      :payMethodInfo="payMethodInfo"
    ></pay-method>
    <recharge-button
      @payClick="payClick"
      @codeClick="codeClick"
      class="recharge-button"
    >
      <slot name="button-name">缴费</slot>
    </recharge-button>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import TopUserPayInfo from '../top-user-pay-info/top-user-pay-info.vue'
import PayMethod from '../pay-method/pay-method.vue'
import RechargeButton from '../recharge-button/recharge-button.vue'
export default defineComponent({
  props: {
    payMethodInfo:{
      type:Object,
      default(){
        return {}
      }
    },
    topUserPayInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  components: {
    TopUserPayInfo,
    PayMethod,
    RechargeButton
  },
  emits:['codeClick','optionsChange','payclick'],
  setup(props,{emit}) {
    const codeClick=()=>{
      emit('codeClick')
      console.log('验证码点击');
    }
    const optionsChange=()=>{
      emit('optionsChange')
      console.log('选项变化');
    }
    const payClick=()=>{
      emit('payclick')
      console.log('payclick点击');
    }
    return {
      codeClick,
      optionsChange,
      payClick
    }

  }
})
</script>

<style scoped lang="less">
.public-cpns {
  .recharge-button {
    padding: 0 6vw 6vw 6vw;
  }
}
</style>
